import './utils/utils.js'
import App from './App'
import { createSSRApp } from 'vue'

// Pinia的使用步骤
// 1. 装包  ==>  pnpm add pinia-plugin-persistedstate
// 2. 注册插件  ==>  app.use(pinia)
// 3. 定义Store  ==>  export const useXxxStore = defineStore('storeId', storeSetup)
// 4. 页面使用Store  ==>  const xxxStore = useXxxStore()

import { createPinia } from 'pinia'
// 导入默认的插件实例
// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 调用 createPersistedState 方法，可以得到一个 persistedstate 插件实例
import { createPersistedState } from 'pinia-plugin-persistedstate'

export function createApp() {
  // app就是应用实例
  const app = createSSRApp(App)

  // 1. 创建Pinia实例
  const pinia = createPinia()

  // 挂载 persistedstate 插件

  // 问题：在小程序中没有持久化成功
  // 原因：是该插件默认使用的存储器是浏览器的localStorage
  // 解决方案：自定义一个存储器 -> uni.getStorageSync 和 uni.setStorageSync

  // 先注释掉 使用 默认插件实例 的代码
  // pinia.use(piniaPluginPersistedstate)

  // 再创建一个自己的插件实例
  const customPiniaPluginPersistedstate = createPersistedState({
    // 可以自定义 各个Store 持久化时 本地存储中的key
    // 每个仓库在持久化时，都会调用这个函数，用其返回值作为本地存储的key
    // key(storeId) {
    //   return '__persistedstate__' + storeId
    // },
    key: (storeId) => '__persistedstate__' + storeId,

    // 自定义存储器
    storage: {
      // 重写存操作
      setItem(key, value) {
        // 转而去调用 uni 的 API
        return uni.setStorageSync(key, value)
      },
      // 重写取操作
      getItem(key) {
        return uni.getStorageSync(key)
      },
    },
  })
  // 然后使用自己创建的插件实例
  pinia.use(customPiniaPluginPersistedstate)

  // 2. 将Pinia实例挂载到应用中
  app.use(pinia)

  return {
    app,
  }
}
